﻿@{
    ViewData["Title"] = "项目管理";
    ViewBag.nav = "project";
}

<div id="app">
    <h2>项目管理</h2>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-inline">
                <button type="button" class="btn btn-danger pull-right" @@click="showEdit(0)">添加</button>
                <div class="form-group">
                    <label>项目名称</label>
                    <input type="text" @@keyup.enter="getList()" v-model="kw" class="form-control">
                </div>
                <button type="button" @@click="getList()" class="btn btn-primary">搜索</button>
            </div>
        </div>
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>编号</th>
                <th>项目名称</th>
                <th>访问Token</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.token}}</td>
                <td>{{item.addTime}}</td>
                <td>
                    <a href="javascript:;" @@click="showEdit(item.id)">修改</a>
                    <a href="javascript:;" @@click="deleteModel(item.id)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>


    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="addModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">{{editTitle}}</h4>
                </div>
                <div class="modal-body">

                    <form>
                        <div class="form-group">
                            <label>项目名称</label>
                            <input type="text" :readonly="m.id>0?'readonly':false" class="form-control" v-model="m.name" placeholder="项目名称">
                        </div>
                        <div class="form-group">
                            <label>访问Token</label>
                            <input type="text" class="form-control" v-model="m.token" placeholder="访问Token">
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @@click="saveModel()">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>


@section scripts{

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                kw:'',
                editTitle: '添加项目',
                list:[],
                m: {
                    id:0,
                    name: '',
                    token: '',
                }
            },
            methods: {
                getList: function () {
                    $.post('@Url.Action("ApiAllProject")', { kw: this.kw }, function (list) {
                        app.list = list;
                    });
                },
                showEdit: function (id) {
                    if (id > 0) {
                        app.editTitle = "修改项目";
                        $.each(this.list, function (index, item) {
                            if (item.id == id) {
                                app.m.id = item.id;
                                app.m.name= item.name;
                                app.m.token= item.token;
                            }
                        });
                    } else {
                        app.editTitle = "添加项目";
                        this.m.id = 0;
                        this.m.name = '';
                        this.m.token = '';
                    }
                    $('#addModal').modal('show');
                },
                saveModel: function () {
                    $.post('@Url.Action("ApiEditProject")', this.m, function (ro) {
                        if (ro.success) {
                            app.getList();
                        } else {
                            alert(ro.msg);
                        }
                    });
                    $('#addModal').modal('hide');
                },
                deleteModel: function (id) {
                    if (confirm("确定要删除吗？")) {
                        $.post('@Url.Action("ApiDeleteProject")', { id: id }, function (ro) {
                            if (ro.success) {
                                app.getList();
                            } else {
                                alert(ro.msg);
                            }
                        });
                    }
                }
            },
            created: function () {
                this.getList();
            }
        });

    </script>
}